<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<title th:text="鸡天新闻-管理"></title>
<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" th:href="@{../../static/admin/css/bootstrap.min.css}">
  <link rel="stylesheet" type="text/css" th:href="@{../../static/admin/css/style.css}">
  <link rel="stylesheet" type="text/css" th:href="@{../../static/admin/css/font-awesome.min.css}">
  <script th:src="@{../../static/admin/js/jquery-2.1.4.min.js}"></script>
  <script th:src="@{../../static/admin/js/bootstrap.min.js}"></script>
  <script th:src="@{../../static/admin/js/admin-scripts.js}"></script>
  <script th:src="@{../../static/js/md5.js}"></script>
  <script th:src="@{../../static/js/jquery.form.min.js}"></script>
  <script language="JavaScript" th:inline="javascript" type="text/javascript">
    function checkEdit() {
      var oldLoginPwd=document.editUser.oldLoginPwd.value;
      var pwd1=document.editUser.loginPwd.value;
      var pwd2=document.editUser.loginPwd1.value;
      var oldPwd=[[${user.getloginPwd()}]];
      if (oldPwd!==hex_md5(oldLoginPwd)){
        alert("密码错误!");
        return false;
      }
      if (pwd1!==pwd2){
        alert("两次输入密码不相同!");
        return false;
      }
      if (pwd1.length<6){
        alert("密码长度需大于6!");
        return false;
      }
      return true;
    }
    function readOnly(id) {
      var map=[[${userMap}]];
      document.seeUser.name.value=map[id]['loginName'];
      document.seeUser.phone.value=map[id]['userPhone'];
      document.seeUser.email.value=map[id]['userEmail'];
      document.seeUser.pwd.value="";
      document.seeUser.pwd_again.value="";
      var role=map[id]['userType'];
      if (role===1){
        $("#1").attr("disabled","disabled");
        $("#o1").removeAttr("hidden");
        $("#o2").removeAttr("selected");
        $("#o3").removeAttr("selected");
        $("#o1").attr("selected","selected");
      }
      if (role===2) {
        $("#1").removeAttr("disabled");
        $("#o1").removeAttr("selected");
        $("#o1").attr("hidden","hidden");
        $("#o3").removeAttr("selected");
        $("#o2").attr("selected","selected");
      }
      if (role===3) {
        $("#1").removeAttr("disabled");
        $("#o1").removeAttr("selected");
        $("#o1").attr("hidden","hidden");
        $("#o2").removeAttr("selected");
        $("#o3").attr("selected","selected");
      }
    }
    function addpUser() {
      var loginName=$("#userName").val();
      var userPhone=$("#userPhone").val();
      var userEmail=$("#userEmail").val();
      var userType=$("#roles option:selected").val();
      var loginPwd=$("#userPwd").val();
      var pwd_again=$("#userPwd1").val();
      if (loginName.match(/^[a-zA-Z0-9]+$/)==null){
        alert("用户名只能包含字母和数字!");
        return false;
      }
      if (loginPwd!==pwd_again){
        alert("两次输入密码不相同!");
        return false;
      }
      if (loginPwd.length<6){
        alert("密码长度需大于6!");
        return false;
      }
      $.ajax({
        url: "http://localhost:8080/newsAPI/add-user",
        data: {
          loginName:loginName,
          userPhone:userPhone,
          userEmail:userEmail,
          userType:userType,
          loginPwd:loginPwd
        },
        type: "POST",
        dataType: "json",
        async: true,
        success: function (re) {
          alert("添加成功!");
          console.log("success");
          window.location.reload();
        },
        error: function () {
          // alert("error");
          console.log(error());
          window.location.reload();
        }
      })
    }
    function updatepUser() {
      var loginName=$("#name").val();
      var userPhone=$("#phone").val();
      var userEmail=$("#email").val();
      var userType=$("#1 option:selected").val();
      var loginPwd=$("#pwd").val();
      var pwd_again=$("#pwd_again").val();
      if (loginName.match(/^[a-zA-Z0-9]+$/)==null){
        alert("用户名只能包含字母和数字!");
        return false;
      }
      if (loginPwd!==pwd_again){
        alert("两次输入密码不相同!");
        return false;
      }
      if (loginPwd.length<6){
        alert("密码长度需大于6!");
        return false;
      }
      $.ajax({
        url: "http://localhost:8080/newsAPI/update-user",
        data: {
          loginName:loginName,
          userPhone:userPhone,
          userEmail:userEmail,
          userType:userType,
          loginPwd:loginPwd
        },
        type: "POST",
        dataType: "json",
        async: true,
        success: function (re) {
          alert("修改成功!");
          console.log("success");
          window.location.reload();
        },
        error: function () {
          // alert("error");
          console.log(error());
        }
      })
    }
  </script>
</head>

<body class="user-select">
<section class="container-fluid">
  <header>
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">切换导航</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
          <a class="navbar-brand" th:href="@{~/admin/index}">AdminSystem</a> </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav navbar-right">
            <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" th:text="${user.getloginName()}"> <span class="caret"></span></a>
              <ul class="dropdown-menu dropdown-menu-left">
                <li><a title="查看或修改个人信息" data-toggle="modal" data-target="#seeUserInfo">个人信息</a></li>
              </ul>
            </li>
            <li><a th:href="@{~/logout}" onClick="if(!confirm('是否确认退出？'))return false;">退出登录</a></li>
          </ul>
          <form action="" method="post" class="navbar-form navbar-right" role="search">
          </form>
        </div>
      </div>
    </nav>
  </header>
  <div class="row">
    <aside class="col-sm-3 col-md-2 col-lg-2 sidebar">
      <ul class="nav nav-sidebar">
        <li><a th:href="@{~/admin/index}">报告</a></li>
      </ul>
      <ul class="nav nav-sidebar">
        <li><a th:href="@{~/admin/index}">公告</a></li>
        <li><a th:href="@{~/admin/manage-news}">管理文章</a></li>
        <li><a th:href="@{~/admin/manage-user}">管理用户</a></li>
      </ul>
      <ul class="nav nav-sidebar">
        <li><a class="dropdown-toggle" id="settingMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">设置</a>
        </li>
      </ul>
    </aside>
    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-lg-10 col-md-offset-2 main" id="main">
    <h1 class="page-header">操作</h1>
        <ol class="breadcrumb">
          <li><a data-toggle="modal" data-target="#addUser">增加用户</a></li>
        </ol>
        <h1 class="page-header">管理<span class="badge" th:text="${page.getTotalElements()}"></span></h1>
        <div class="table-responsive">
          <table class="table table-striped table-hover">
            <thead>
              <tr>
                <th><span class="glyphicon glyphicon-th-large"></span> <span class="visible-lg">ID</span></th>
                <th><span class="glyphicon glyphicon-user"></span> <span class="visible-lg">用户名</span></th>
                <th><span class="glyphicon glyphicon-bookmark"></span> <span class="visible-lg">手机号</span></th>
                <th><span class="glyphicon glyphicon-pushpin"></span> <span class="visible-lg">邮箱</span></th>
                <th><span class="glyphicon glyphicon-time"></span> <span class="visible-lg">权限</span></th>
                <th><span class="glyphicon glyphicon-pencil"></span> <span class="visible-lg">操作</span></th>
              </tr>
            </thead>
            <tbody>
              <tr th:each="pUser:${userList}">
                <td th:text="${pUser.getuserId()}">1</td>
                <td><a style=" text-decoration: none; color: inherit;" th:text="${pUser.getloginName()}"></a></td>
                <td th:text="${pUser.getuserPhone()}"></td>
                <td th:text="${pUser.getuserEmail()}"></td>
                <td th:text="${roles[pUser.getuserType()]}"></td>
                <td>
                  <a rel="a" data-toggle="modal" data-target="#seeUser" th:onclick="|javascript:readOnly(${pUser.getuserId()})|">修改</a>
                  <a rel="b" name="detail" th:href="@{'~/admin/update-user-detail/'+${pUser.getuserId()}}"> 详情</a>
                  <a th:rel="${pUser.getuserId()}" name="delete" th:disabled="${pUser == 1}"> 删除</a>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      <footer class="message_footer">
        <nav>
          <ul class="pagination pagenav">
            <li th:class="${pageIndex - 1 == 0} ? disabled"><a aria-label="Previous" th:href="@{'~/admin/manage-user?pageIndex='+${pageIndex - 1}}"> <span aria-hidden="true">&laquo;</span> </a> </li>
            <li class="active"><a href="javascript:void(0)" th:text="${pageIndex}"></a></li>
            <li th:class="${pageIndex == pageMax} ? disabled"><a aria-label="Next" th:href="@{'~/admin/manage-user?pageIndex='+${pageIndex + 1}}"> <span aria-hidden="true">&raquo;</span> </a> </li>
          </ul>
        </nav>
      </footer>
    </div>
  </div>
</section>
<!--增加用户模态框-->
<div class="modal fade" id="addUser" tabindex="-1" role="dialog" aria-labelledby="addUserModalLabel">
  <div class="modal-dialog" role="document" style="max-width:450px;">
    <form name="addUser" method="post" autocomplete="off" draggable="false">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" >增加用户</h4>
        </div>
        <div class="modal-body">
          <table class="table" style="margin-bottom:0px;">
            <thead>
              <tr> </tr>
            </thead>
            <tbody>
              <tr>
                <td wdith="20%">用户名:</td>
                <td width="80%"><input type="text" value="" class="form-control" id="userName" name="userName" maxlength="20" autocomplete="off"/></td>
              </tr>
              <tr>
                <td wdith="20%">电话:</td>
                <td width="80%"><input type="text" value="" class="form-control" id="userPhone" name="userPhone" maxlength="20" autocomplete="off" /></td>
              </tr>
              <tr>
                <td wdith="20%">邮箱:</td>
                <td width="80%"><input type="email" value="" class="form-control" id="userEmail" name="userEmail" maxlength="50" autocomplete="off" /></td>
              </tr>
              <tr>
                <td wdith="20%">权限:</td>

                <td width="80%">
                  <label for="roles"><select id="roles">
                    <option value="2">USER_S</option>
                    <option selected="selected" value="3">USER</option>
                  </select></label>
                </td>
              </tr>
              <tr>
                <td wdith="20%">密码:</td>
                <td width="80%"><input type="password" class="form-control" id="userPwd" name="userPwd" maxlength="18" autocomplete="off" /></td>
              </tr>
              <tr>
                <td wdith="20%">确认密码:</td>
                <td width="80%"><input type="password" class="form-control" id="userPwd1" name="userPwd1" maxlength="18" autocomplete="off" /></td>
              </tr>
            </tbody>
            <tfoot>
              <tr></tr>
            </tfoot>
          </table>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary" onclick="addpUser()">提交</button>
        </div>
      </div>
    </form>
  </div>
</div>
<!--修改用户模态框-->
<div class="modal fade" id="seeUser" tabindex="-1" role="dialog" aria-labelledby="seeUserModalLabel">
  <div class="modal-dialog" role="document" style="max-width:450px;">
    <form name="seeUser" method="post" autocomplete="off" draggable="false">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title">修改用户</h4>
        </div>
        <div class="modal-body">
          <table class="table" style="margin-bottom:0px;">
            <thead>
              <tr> </tr>
            </thead>
            <tbody>
              <tr>
                <td wdith="20%">用户名:</td>
                <td width="80%"><input type="text" value="" class="form-control" id="name" name="name" maxlength="20" autocomplete="off" readonly="readonly"/></td>
              </tr>
              <tr>
                <td wdith="20%">电话:</td>
                <td width="80%"><input type="text" value="" class="form-control" id="phone" name="phone" maxlength="20" autocomplete="off" /></td>
              </tr>
              <tr>
                <td wdith="20%">邮箱:</td>
                <td width="80%"><input type="email" value="" class="form-control" id="email" name="email" maxlength="50" autocomplete="off" /></td>
              </tr>
              <tr>
                <td wdith="20%">权限:</td>

                <td width="80%">
                  <label for="1"><select id="1">
                    <option value="1" id="o1" hidden="hidden">ADMIN</option>
                  <option value="2" id="o2">USER_S</option>
                  <option selected="selected" value="3" id="o3">USER</option>
                </select></label>
                </td>
              </tr>
              <tr>
                <td wdith="20%">新密码:</td>
                <td width="80%"><input type="password" class="form-control" id="pwd" name="pwd" maxlength="18" autocomplete="off" /></td>
              </tr>
              <tr>
                <td wdith="20%">确认密码:</td>
                <td width="80%"><input type="password" class="form-control" id="pwd_again" name="pwd_again" maxlength="18" autocomplete="off" /></td>
              </tr>
            </tbody>
            <tfoot>
              <tr></tr>
            </tfoot>
          </table>
        </div>
        <div class="modal-footer">
          <input type="hidden" name="userid" value="" />
          <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary" onclick="updatepUser()">提交</button>
        </div>
      </div>
    </form>
  </div>
</div>
<!--个人信息模态框-->
<div class="modal fade" id="seeUserInfo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <form id="editUser" th:action="@{~/edit-user}" method="post" name="editUser" onsubmit="return checkEdit()">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" >个人信息</h4>
        </div>
        <div class="modal-body">
          <table class="table" style="margin-bottom:0px;">
            <thead>
            <tr> </tr>
            </thead>
            <tbody>
            <tr>
              <td wdith="20%">用户名:</td>
              <td width="80%"><input type="text" th:value="${user.getloginName()}" class="form-control" name="loginName" maxlength="20" autocomplete="off" readonly="readonly" /></td>
            </tr>
            <tr>
              <td wdith="20%">电话:</td>
              <td width="80%"><input type="text" th:value="${user.getuserPhone()}" class="form-control" name="userPhone" maxlength="20" autocomplete="off" /></td>
            </tr>
            <tr>
              <td wdith="20%">邮箱:</td>
              <td width="80%"><input type="email" th:value="${user.getuserEmail()}" class="form-control" name="userEmail" maxlength="50" autocomplete="off" /></td>
            </tr>
            <tr>
              <td wdith="20%">旧密码:</td>
              <td width="80%"><input type="password" class="form-control" name="oldLoginPwd" maxlength="18" autocomplete="off" /></td>
            </tr>
            <tr>
              <td wdith="20%">新密码:</td>
              <td width="80%"><input type="password" class="form-control" name="loginPwd" maxlength="18" autocomplete="off" /></td>
            </tr>
            <tr>
              <td wdith="20%">确认密码:</td>
              <td width="80%"><input type="password" class="form-control" name="loginPwd1" maxlength="18" autocomplete="off" /></td>
              <td hidden="hidden"><input type="text" hidden="hidden" th:value="${user.getuserType()}" name="userType"></td>
              <td hidden="hidden"><input type="text" hidden="hidden" th:value="${user.getuserId()}" name="userId"></td>
            </tr>
            </tbody>
            <tfoot>
            <tr></tr>
            </tfoot>
          </table>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
          <button type="submit" class="btn btn-primary">提交</button>
        </div>
      </div>
    </form>
  </div>
</div>
<script>
$(function () {
  $("#main table tbody tr td a").click(function () {
        var name = $(this);
        var id = name.attr("rel"); //对应id
        if (name.attr("name") === "delete") {
            if (window.confirm("此操作不可逆，是否确认？")) {
                $.ajax({
                    type: "POST",
                    url: "http://localhost:8080/newsAPI/remove-user",
                    data: {
                      userId: id,
                    },
                    cache: false,
                    success: function (data) {
                        window.location.reload();
                    }
                });
            };
        };
    });
});
</script>
</body>
</html>
